<template>
    <section>
      <div class="register">
        <span class="glyphicon glyphicon-menu-left pull-left" @click="get"></span>
        <span class="register-span">搜索</span>
      </div>
      <div class="search">
        <!--输入框input事件,出现一个小X-->
        <input type="text" placeholder="请输入商家或美食名称"  class="form-control input" v-model="value" @input="change">
        <span class="glyphicon glyphicon-remove" @click="empty" v-if="vanish1"></span>
        <button class="btn" @click="submit">提交</button>
      </div>
      <!--搜索历史-->
      <div class="sHistory" v-if="isTrue"><p>搜索历史</p></div>
      <div class="cow searchHistory" @click='valueClick(item)' v-for="(item, i) in historyArr" v-if="isTrue">
        <span>{{item}}</span>
        <div class="pull-right">
          <span class="glyphicon glyphicon-remove" @click="remove(i)"></span>
        </div>
      </div>
      <div class="clear" @click="clear" v-if="isTrue">
        <p>清除历史</p>
      </div>
      <div class="search-history" v-if="vanish">
        <p>商家</p>
        <div v-for="item in valueArr" @click="restaurant">
          <!--for循环获取到的搜索内容-->
          <li >
            <img :src="'https://elm.cangdu.org/img/' + item.image_path" alt="">
            <div class="search-div">
              <span>{{item.name}}</span>
              <span class="search-span">支付</span><br>
              <span>月售{{item.recent_order_num}}单</span><br>
              <span>{{item.float_minimum_order_amount}}元起送 / 距离{{item.distance}}</span>
              <hr>
            </div>
          </li>
          <hr>
        </div>
      </div>
    </section>
</template>

<script>
  import '../../css/header.css'
  import Vue from 'vue'
    export default {
        name: "Search",
      mounted(){
          // 获取搜索食品的历史记录
        if (localStorage.getItem("values") !== null) {
          this.historyArr = JSON.parse(localStorage.getItem("values"));
        }
      },
      data(){
          return {
            value:'',
            valueArr:[],
            history:[],//存储所有的value值
            historyArr:[], //存储所有的搜索历史
            vanish:false,
            vanish1:false,
            isTrue:true
          }
      },
      methods:{
        get(){
          window.history.go(-1)
        },
          // 根据输入框内容匹配餐馆
        submit(){
          this.isTrue = false;
          Vue.axios.get(`https://elm.cangdu.org/v4/restaurants?geohash=${this.$store.state.city.geohash}&keyword=${this.value}` ).then((res)=>{
            this.valueArr = res.data;
            this.vanish = true;
            // console.log(this.valueArr)
          });
          // 搜索历史
          this.$store.commit('search', this.value);
        },
        // 点击跳转到
        restaurant(){
          this.$router.push({path:''})
        },
        // input事件函数
        change(){
          this.vanish1 = true;
        },
        // 清除输入框函数
        empty(){
          this.value = '';
          this.vanish1 = false
        },
          // 点击清除搜索记录
        remove(i){
          // localStorage.clear();
          this.historyArr.splice(i, 1);
        },
        // 清空所有历史记录
        clear(){
          localStorage.clear();
          this.historyArr.splice(0, this.historyArr.length);
        },
        //点击历史记录中的某个跳转响应商品数据
        valueClick(value){
          this.isTrue = false;
          Vue.axios.get(`https://elm.cangdu.org/v4/restaurants?geohash=${this.$store.state.city.geohash}&keyword=${value}` ).then((res)=>{
            this.valueArr = res.data;
            this.vanish = true;
            // console.log(this.valueArr)
          });
        }
      },
    }
</script>

<style scoped>
  section{
    width: 100%;
    height: 100%;
  }
  .search{
    position: relative;
    width: 100%;
    height: 0.5rem;
    background-color: white;
    line-height: 0.5rem;
  }
  .input{
    position: absolute;
    width: 73%;
    height: 0.3rem;
    background-color: #F5F5F5;
    margin: 0.1rem 0 0 0.1rem;
  }
  .btn{
    float: right;
    font-size: 0.16rem;
    color: white;
    background-color: #3190E8;
    width: 20%;
    height: 0.3rem;
    line-height: 0.1rem;
    text-align: center;
    margin: 0.1rem 0.1rem 0 0.05rem;
  }
  .search-history{
    width: 100%;
    background-color: white;
  }
  .search-history>p{
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    padding-left: 0.1rem;
    background-color: #F5F5F5;
  }
  .search-history img{
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.1rem;
  }
  li{
    width: 96%;
    margin: auto;
    list-style: none;
    display: flex;
  }
  .search-div{
    width: 100%;
    height: 0.8rem;
  }
  .search-span{
    color: #FFA975;
    font-size: 0.12rem;
    border: 1px solid #FFA975;
    font-weight: bold;
    display: inline-block;
    /*font-style:oblique;*/
    transform:skew(-20deg);
  }
  .search span {
    position: absolute;
    right: 1rem;
    top: 0.18rem;
  }
  .searchHistory{
    width: 100%;
    height: 0.3rem;
    line-height: 0.3rem;
    background-color: white;
    border-bottom: 0.01rem solid lightgray;
  }
  .searchHistory > span{
    margin-left: 0.1rem;
  }
  .searchHistory > div{
    margin-right: 0.1rem;
  }
  .clear{
    text-align: center;
    width: 100%;
    height: 0.3rem;
    line-height: 0.3rem;
    background-color: white;
    color: #3190E8;
    font-size: 0.16rem;
  }
  .sHistory{
    width: 100%;
    height: 0.3rem;
    line-height: 0.3rem;
  }
</style>
